<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
	<link rel="icon" href="../logo.png">
	<link rel="stylesheet" href="../style.css">
	<script src="../vue.js"></script>
</head>
<body>
	<p class="title">v-if</p>
	<div id="app">
		<div>
			<h3 v-if='ok'>Yes</h3>
			<h3 v-else>No</h3>
		</div>
		

		<h3 v-if='Math.random()>0.5'>随机数大于0.5</h3>
		<h3 v-else-if='Math.random()===0.5'>等于0.5</h3>
		<h3 v-else='Math.random()<0.5'>随机数小于0.5</h3>

	</div>

	<script>
		var app = new Vue({
			el:'#app',
			data:{
				ok:true,
			}
		})
	</script>

	<p class="subtitle">未使用key控制元素的重用</p>
	<div id="nokey">
		<template v-if="loginType === 'username'">
			<label for="username">Username</label>
			<input type="text" placeholder="Enter your name">
		</template>
		<template v-else>
			<label for="email">Email</label>
			<input type="text" placeholder="Enter your email">
		</template>
		<input type="button" value="Toggle Login Type" v-on:click="toggle()">
	</div>
	<script>
		var app2 = new Vue({
			el:'#nokey',
			data:{
				loginType:'username',
			},
			methods:{
				toggle:function () {
					return this.loginType=this.loginType==='username'?'email':'username'
				}
			}
		})
	</script>

	<p class="subtitle">使用key控制元素的重用</p>
	<div id="usekey">
		<template v-if="loginType === 'username'">
			<label for="username">Username</label>
			<input type="text" placeholder="Enter your name" key="username-input">
		</template>
		<template v-else>
			<label for="email">Email</label>
			<input type="text" placeholder="Enter your email" key="email-input">
		</template>
		<input type="button" value="Toggle Login Type" v-on:click="toggle()">
	</div>
	<script>
		var app2 = new Vue({
			el:'#usekey',
			data:{
				loginType:'username',
			},
			methods:{
				toggle:function () {
					return this.loginType=this.loginType==='username'?'email':'username'
				}
			}
		})
	</script>
</body>
</html>